<template>
    <div style="height: 122px">
        <el-upload
            v-if="multiple"
            class="avatar-uploader"
            :file-list="fileList"
            list-type="picture-card"
            :action="action"
            multiple
            :limit="3"
            :headers="headers"
            :on-preview="handlePreview"
            accept=".jpg,.png,.bmp"
            :on-remove="handRemove"
            :on-success="handSuccess"
            :on-exceed="handExceed"
        >
            <i class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-upload v-else :class="sub ? 'sub' : 'avatar-uploader'" :action="action" :headers="headers" :on-preview="handlePreview" accept=".jpg,.png,.bmp,.gif" :on-success="handSuccess" :show-file-list="false">
            <img :class="sub ? 'sub avatar' : 'avatar'" v-if="url" :src="static_url + url" />
            <i v-else :class="sub ? 'sub el-icon-plus avatar-uploader-icon' : 'el-icon-plus avatar-uploader-icon'"></i>
        </el-upload>
    </div>
</template>

<script>
export default {
    data() {
        return {
            static_url: '/static',
            action: '/api/report/upload',
            actionDevice25D: '',
            headers: {
                Authorization: '',
            },
            fileList: [],
        }
    },
    props: {
        url: {
            type: String,
            default() {
                return null
            },
        },
        name: {
            type: String,
            default() {
                return ''
            },
        },
        subName: {
            type: String,
            default() {
                return ''
            },
        },
        index: {
            type: Number,
            default() {
                return 0
            },
        },
        sub: {
            type: Boolean,
            default() {
                return false
            },
        },
        multiple: {
            type: Boolean,
            default() {
                return false
            },
        },
        dimg: {
            type: String,
            default() {
                return null
            },
        },
    },
    methods: {
        handExceed() {
            this.$message.warning('最多只能上传三张图片！')
        },
        handRemove(file, fileList) {
            this.urls(fileList)
        },
        handSuccess(response, file, fileList) {
            if (response.code !== 0) {
                this.$message({
                    type: 'info',
                    message: '图片上传失败',
                })
                return
            }
            if (this.multiple) {
                fileList.find((item) => item.uid === file.uid).url = this.static_url + response.data
                this.urls(fileList)
            } else {
                this.url = response.data
                if (this.sub) {
                    this.$emit('url', { name: this.name, subName: this.subName, url: this.url, index: this.index })
                } else {
                    this.$emit('url', { name: this.name, url: this.url })
                }
            }
        },
        urls(fileList) {
            this.fileList = fileList
            let url = []
            fileList.map((item) => {
                url.push(item.url.split(this.static_url)[1])
            })
            this.$emit('url', { name: this.name, url })
        },
    },
    created() {
        let token = localStorage.getItem('token')
        this.headers.Authorization = token

        this.action = this.dimg ? '/api/report/upload?dimg=1' : '/api/report/upload'

    },
    mounted() {
        if (this.multiple && this.url) {
            this.url.map((item) => {
                this.fileList.push({
                    url: item,
                })
            })
        }
    },
}
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
}

.avatar {
    width: 160px;
    height: 120px;
    display: block;
}

.sub {
    width: 60px !important;
    height: 40px !important;
    line-height: 40px !important;
}
</style>
